<template>
  <view class="settings-container">
    <uni-list>
      <uni-list-item v-for="(item, index) in listData" 
        :key="index"
        :title="item.title"
        :note="item.note"
        showArrow
		:clickable="true"
        @click="handleClick(item, index)"
      >
        <template #header>
          <uni-icons :type="item.icon" size="24" color="#666"></uni-icons>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/utils/pinia'
import type { UserStore } from '@/utils/pinia'

const userStore: UserStore = useUserStore()
interface ListItem {
  title: string
  note?: string
  icon: string
  url?: string
}

const listData = ref<ListItem[]>([
  {
    title: '修改密码',
    note: '重新设置您的登录密码',
    icon: 'locked',
    url: '/pageSign/modify'
  },
  {
    title: '清除缓存',
    icon: 'trash'
  },
  {
    title: '退出登录',
    icon: 'refresh'
  },
])

const handleClick = (item: ListItem, index:number) => {
  console.log('点击了列表项：', item.title)
  // 这里可以添加导航逻辑
  if (item.url)  {
    uni.navigateTo({
        url: `${item.url}`
    })
  } else {
    switch (index) {
      case 1:
        // 显示加载提示
        uni.showLoading({
          title: '正在清除缓存'
        })
        // 清除本地存储
        try {
          uni.clearStorageSync()
          setTimeout(() => {
            uni.hideLoading()
            uni.showToast({
              title: '缓存清除成功',
              icon: 'success'
            })
          }, 500)
        } catch(e) {
          uni.hideLoading()
          uni.showToast({
            title: '清除缓存失败',
            icon: 'error'
          })
        }
        break;
        case 2: 
          userStore.logout();
          
        break;
    }
  }
}
</script>

<style lang="scss">
.settings-container {
  background-color: #f5f5f5;
  min-height: 100vh;

  :deep(.uni-list) {
    margin-top: 10px;
    
    .uni-list-item {
      &__container {
        padding: 12px 15px;
      }

      &__content-title {
        font-size: 16px;
        color: #333;
      }

      &__content-note {
        font-size: 12px;
        color: #999;
      }

      &__extra-text {
        color: #666;
      }
    }
  }
}
</style>